<template>
	<view id="content" class="time-space">
		<div ref="container" id="container"></div>
	</view>
</template>

<script>
	import Konva from "konva";
	import TouchLogic from "./touch_logic";
	import PositionLogic from "./positions/position_logic";
	import { currentTime } from "./utils";
	import EventContainer from "./event_container.js";
	import Events from "./events.js"
	
	const positionLogic = new PositionLogic();		// 位置处理器
	const touchLogic = new TouchLogic();			// 触摸处理器
	
	let stage = null;			// konvajs的组件
	let layer = null;			// konvajs的组件
	export default {
		props: {

			/**
			 * 控件宽度
			 */
			width: {
				type: Number,
				default () {
					return window.innerWidth;
				},
				required: false,
				validator(value) {
					return value >= 0;
				}
			},

			/**
			 * 控件高度
			 */
			height: {
				type: Number,
				default () {
					return window.innerHeight - 100;
				},
				required: false,
				validator(value) {
					return value >= 0;
				}
			},

			/**
			 * 显示最大时间
			 */
			maxTime: {
				type: Number,
				default () {
					return currentTime() + 1000 * 60 * 60 * 24 * 30;
				},
				required: false,
				validator(value) {
					return value >= 0;
				}
			},

			/**
			 * 显示最小时间
			 */
			minTime: {
				type: Number,
				default () {
					return currentTime() - 1000 * 60 * 60 * 24 * 30;
				},
				required: false,
				validator(value) {
					return value >= 0;
				}
			},

			/**
			 * 被占据的时间段
			 */
			busyTime: {
				type: Array,
				default () {
					return [
						// 以下为一个例子
						// {
						// 	// 此占据时间显示名字
						// 	content: null,
						// 	// 开始时间
						// 	startTime: 0,
						// 	// 结束时间
						// 	endTime: 1,
						// }
					];
				},
				required: false
			}
		},
		data() {
			return {
			}
		},
		mounted() {
			
			// 添加拖动事件
			this.$refs.container.addEventListener("touchmove", this.onTouchEvent);
			this.$refs.container.addEventListener("touchstart", this.onTouchEvent);
			this.$refs.container.addEventListener("touchend", this.onTouchEvent);
			
			// 监听触摸器的回调
			EventContainer.addListener(Events.MOVE, this.onMove);
			const width = this.width;
			const height = this.height;
			positionLogic.init(this.minTime, this.maxTime, this.busyTime, this.width, this.height);


			// var stage = new Konva.Stage({
			// 	container: 'container',
			// 	width: width,
			// 	height: height
			// });

			// var layer = new Konva.Layer();

			// var text = new Konva.Text({
			// 	x: 10,
			// 	y: 10,
			// 	fontFamily: 'Calibri',
			// 	fontSize: 24,
			// 	text: '',
			// 	fill: 'black'
			// });

			// var box = new Konva.Rect({
			// 	x: 20,
			// 	y: 100,
			// 	offset: [50, 25],
			// 	width: 100,
			// 	height: 50,
			// 	fill: '#00D2FF',
			// 	stroke: 'black',
			// 	strokeWidth: 4,
			// 	draggable: true
			// });

			// // write out drag and drop events
			// box.on('dragstart', function(events) {
			// 	console.log('dragstart', events);
			// });
			// box.on('dragend', function(events) {
			// 	console.log('dragend', events);
			// });

			// layer.add(text);
			// layer.add(box);

			// // add the layer to the stage
			// stage.add(layer);
		},
		
		unmounted() {
			
			// 防止内存溢出
			layoutLogic.release();
			EventContainer.removeListener(Events.MOVE, this.onMove);
			
			this.$refs.container.removeEventListener("touchmove", this.onTouchEvent);
			this.$refs.container.removeEventListener("touchstart", this.onTouchEvent);
			this.$refs.container.removeEventListener("touchend", this.onTouchEvent);
		},
		
		methods: {
			
			/**
			 * 触摸回调，由TouchLogic调用
			 * @param {Object} distance 变动
			 */
			onMove(distance){
				positionLogic.move(distance.deltaX, distance.deltaY);
			},
			
			
			/**
			 * 触摸事件
			 * @param {Object} event
			 */
			onTouchEvent(events){
				// 多指触摸
				const touches = events.touches;
				if(!touches || touches.length < 1){
					return;
				}
				
				// 先实现单指拖动
				const finger = touches[0];
				const clientX = finger.clientX;
				const clientY = finger.clientY;
				
				switch(events.type){
					case "touchmove":
						touchLogic.onTouchMove({
							x: clientX,
							y: clientY,
						})
						break;
					case "touchstart":
						touchLogic.onTouchStart({
							x: clientX,
							y: clientY,
						})
						break;
					case "touchend":
						touchLogic.onTouchEnd({
							x: clientX,
							y: clientY,
						})
						break;
				}
			}
		}
	}
</script>

<style>
	.time-space {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
